<template>
  <el-container class="main-container">
    <el-header class="main-header">
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <img class="header-img" src="../../assets/logo1.png" />
          </div>
        </el-col>
        <el-col :span="15" class="header-middle">
          <ul class="header-menu">
            <li
              class="header-menu-item"
              v-for="(item, i) in headermenulist"
              :key="i"
              @click="changeMenu(i)"
            >
              <div :class="['li-item', i === n ? 'active' : '']">
                <span class="li-item-icon"><i :class="item.icon"></i></span>
                <span class="li-item-name">
                  {{ item.name }}
                </span>
              </div>
            </li>
          </ul>
        </el-col>
        <el-col :span="5">
          <div class="header-right">
            <el-button type="text" @click="openbook"
              ><font style="color: #fff">操作手册</font></el-button
            >
            <el-button type="text" @click="resetpassword"
              ><font style="color: #fff">密码重置</font></el-button
            >
            <el-button type="text" @click="exit"
              ><font style="color: #fff">退出</font></el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container class="main-second-container">
      <el-aside class="main-aside" width="200px">
        <el-menu
          :unique-opened="true"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        >
          <el-submenu :index="''+item.id" v-for="item in menusCur" :key="item.id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.name}}</span>
            </template>
              <el-menu-item :index="item.id+'-'+subitem.id" v-for="subitem in item.childs" :key=subitem.id> 
                   
                   <span>{{subitem.name}}</span>
              </el-menu-item>          
          </el-submenu> 
        </el-menu>
      </el-aside>
      <el-main class="main-main">
          <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      headermenulist: [],
      menusAside: [],
      menusCur: [],
      n: 0,
    };
  },
  created() {
    this.getHeadermenulist();
    this.getAsidemenulist();
    this.getCurmenus();
  },
  beforeCreate() {
    console.log("检查有没有token");
    const token = localStorage.getItem("token");
    //console.log(token);
    if (!token) {
      this.$router.push({ name: "login" });
    }
  },
  methods: {
    openbook() {
      this.$message.info("正在开发中");
    },
    resetpassword() {
      this.$message.success("弹出密码框");
    },
    exit() {
      this.$confirm("确定退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          this.$router.push({
            name: "login",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    getHeadermenulist() {
      this.headermenulist.push({ name: "销售管理", icon: "el-icon-coin",index:1 });
      this.headermenulist.push({ name: "项目管理", icon: "el-icon-bank-card",index:2 });
      this.headermenulist.push({ name: "生产管理", icon: "el-icon-connection",index:3});
      this.headermenulist.push({name: "采购管理", icon: "el-icon-shopping-cart-1",index:4 });
      this.headermenulist.push({ name: "仓库中心", icon: "el-icon-house" ,index:5});
      this.headermenulist.push({ name: "财务报销",icon: "el-icon-notebook-1",index:6 });
      this.headermenulist.push({ name: "系统设置", icon: "el-icon-setting",index:7 });
      this.headermenulist.push({ name: "文件管理", icon: "el-icon-reading",index:8 });
      this.headermenulist.push({ name: "人资管理", icon: "el-icon-user" ,index:9});
      this.headermenulist.push({ name: "技术管理", icon: "el-icon-help",index:10 });
      this.headermenulist.push({ name: "制造管理", icon: "el-icon-c-scale-to-original",index:11 });
    },
    getAsidemenulist() {
        this.menusAside.push({
            id: 1,
            parentid: 1,
            name: "销售合同管理",
            childs:[
                {
                    id: 1,
                    name: "历史合同查询"
                },
                {
                    id: 2,
                    name: "未完成合同"
                },
                {
                    id: 3,
                    name: "合同收款"
                }
            ]
        }),
        this.menusAside.push({
            id: 2,
            parentid: 1,
            name: "出货指示",
            childs:[
                {
                    id: 1,
                    name: "销售发货申请"
                },
                {
                    id: 2,
                    name: "销售发货审核"
                }
            ]
        }),
        this.menusAside.push({
            id: 3,
            parentid: 2,
            name: "加工项目任务管理",
            childs:[
                {
                    id: 1,
                    name: "在制生产任务列表"
                },
                {
                    id: 2,
                    name: "待审核任务列表"
                },
                {
                    id: 3,
                    name: "项目维护"
                }
            ]
        }),
        this.menusAside.push({
            id: 4,
            parentid: 2,
            name: "加工合同管理",
            childs:[
                {
                    id: 1,
                    name: "合同状态列表"
                },
                {
                    id: 2,
                    name: "合同零件绑定"
                }
            ]
        }),
        this.menusAside.push({
            id: 5,
            parentid: 3,
            name: "生产计划管理",
            childs:[
                {
                    id: 1,
                    name: "新建计划"
                },
                {
                    id: 2,
                    name: "计划维护"
                },
                {
                    id: 3,
                    name: "计划查询"
                }
            ]
        }),
        this.menusAside.push({
            id: 6,
            parentid: 3,
            name: "生产报工",
            childs:[
                {
                    id: 1,
                    name: "车铣报工"
                },
                {
                    id: 2,
                    name: "钳工报工"
                }
            ]
        }),
        this.menusAside.push({
            id: 7,
            parentid: 4,
            name: "我的采购申请",
            childs:[
                {
                    id: 1,
                    name: "采购申请"
                },
                {
                    id: 2,
                    name: "历史采购单"
                },
                {
                    id: 3,
                    name: "采购进度查询"
                }
            ]
        }),
        this.menusAside.push({
            id: 8,
            parentid: 4,
            name: "采购操作",
            childs:[
                {
                    id: 1,
                    name: "待审采购单"
                },
                {
                    id: 2,
                    name: "采购审批"
                }
            ]
        }),
        this.menusAside.push({
            id: 9,
            parentid: 5,
            name: "入库",
            childs:[
                {
                    id: 1,
                    name: "入库申请单"
                },
                {
                    id: 2,
                    name: "采购入库"
                },
                {
                    id: 3,
                    name: "其它入库"
                }
            ]
        }),
        this.menusAside.push({
            id: 10,
            parentid: 5,
            name: "出库",
            childs:[
                {
                    id: 1,
                    name: "采购出库"
                },
                {
                    id: 2,
                    name: "其它出库"
                }
            ]
        }),
        this.menusAside.push({
            id: 11,
            parentid: 6,
            name: "出差报销",
            childs:[
                {
                    id: 1,
                    name: "新建报销单"
                },
                {
                    id: 2,
                    name: "我的报销单"
                },
                {
                    id: 3,
                    name: "历史报销单"
                }
            ]
        }),
        this.menusAside.push({
            id: 12,
            parentid: 6,
            name: "采购报销",
            childs:[
                {
                    id: 1,
                    name: "报销申请单"
                },
                {
                    id: 2,
                    name: "历史报销单"
                }
            ]
        }),
         this.menusAside.push({
            id: 13,
            parentid: 7,
            name: "客户和供应商管理",
            childs:[
                {
                    id: 1,
                    name: "客户列表"
                },
                {
                    id: 2,
                    name: "供应商列表"
                } 
            ]
        }),
        this.menusAside.push({
            id: 14,
            parentid: 7,
            name: "合同设置",
            childs:[
                {
                    id: 1,
                    name: "销售合同设置"
                },
                {
                    id: 2,
                    name: "采购合同设置"
                }
            ]
        }),
         this.menusAside.push({
            id: 15,
            parentid: 7,
            name: "系统管理",
            childs:[
                {
                    id: 1,
                    name: "用户管理"
                },
                {
                    id: 2,
                    name: "角色管理"
                },
                {
                    id: 3,
                    name: "菜单管理"
                }
            ]
        }),
        this.menusAside.push({
            id: 16,
            parentid: 8,
            name: "公共文件管理",
            childs:[
                {
                    id: 1,
                    name: "文件查询"
                },
                {
                    id: 2,
                    name: "文件上传"
                }
            ]
        }),
         this.menusAside.push({
            id: 17,
            parentid: 9,
            name: "员工管理",
            childs:[
                {
                    id: 1,
                    name: "员工信息"
                },
                {
                    id: 2,
                    name: "请假"
                },
                {
                    id: 3,
                    name: "调休"
                }
            ]
        }),
        this.menusAside.push({
            id: 18,
            parentid: 9,
            name: "公共资源",
            childs:[
                {
                    id: 1,
                    name: "通讯录"
                },
                {
                    id: 2,
                    name: "表单下载"
                },
                {
                    id: 3,
                    name: "公告发布"
                }
            ]
        }),
         this.menusAside.push({
            id: 19,
            parentid: 10,
            name: "工艺管理",
            childs:[
                {
                    id: 1,
                    name: "工艺规程管理"
                },
                {
                    id: 2,
                    name: "待审核工艺"
                },
                {
                    id: 3,
                    name: "产品数据"
                }
            ]
        }),
        this.menusAside.push({
            id: 20,
            parentid: 10,
            name: "工艺准备任务",
            childs:[
                {
                    id: 1,
                    name: "待处理生产任务"
                },
                {
                    id: 2,
                    name: "技术准备计划"
                }
            ]
        }),
         this.menusAside.push({
            id: 21,
            parentid: 11,
            name: "产品数据管理",
            childs:[
                {
                    id: 1,
                    name: "产品数据维护"
                } 
            ]
        }),
        this.menusAside.push({
            id: 22,
            parentid: 11,
            name: "生产单元管理",
            childs:[
                {
                    id: 1,
                    name: "制造单元管理"
                } 
            ]
        }),
         this.menusAside.push({
            id: 23,
            parentid: 11,
            name: "计划日历",
            childs:[
                {
                    id: 1,
                    name: "工厂日历"
                },
                {
                    id: 2,
                    name: "周班制计划"
                } 
            ]
        }),
        this.menusAside.push({
            id: 24,
            parentid: 11,
            name: "生产设备管理",
            childs:[
                {
                    id: 1,
                    name: "生产设备列表"
                },
                {
                    id: 2,
                    name: "资产台账管理"
                }
            ]
        })
    },
    getCurmenus() {
        if(this.menusCur!=null){
            this.menusCur=[];
        }
        if(this.menusAside!=null){
            this.menusAside.forEach(item=>{
                if((this.n+1)===item.parentid){
                    this.menusCur.push(item);
                }
            })
        }
    },
    changeMenu(index) {
      this.n = index;
      console.log("切换菜单：" + this.headermenulist[index].name);
      this.getCurmenus();
    },
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
    handleClose(key, keyPath) {
        console.log(key, keyPath);
    }
  },
};
</script>
<style scoped>
.main-container {
  height: 100%;
}
.main-container .main-header {
  background-color: rgb(74, 115, 238);
}
.main-container .main-aside {
  background-color: rgb(59, 57, 57);
}
.main-container .main-main {
  background-color: silver;
}
.grid-content bg-purple {
  height: 100%;
  width: 100%;
}
.grid-content .header-img {
  /* margin-right: 10px;
  margin-top: 10px; */
  margin: 0px;
  height: 45px;
  width: 182px;
  position: relative;
  z-index: 0;
 
}
.header-middle {
  overflow: hidden;
}
.header-right {
  margin-top: 20px;
  margin-left: 30px;
  display: flex;
  flex-flow: row wrap;
  align-content: space-around;

  /* display: flex;
    align-items: baseline;
	justify-content:end;  */
}
.header-middle {
  height: 100%;
}
.header-middle .header-menu {
  margin: 2px;
  width: 100%;
  height: 98%;
  white-space: nowrap;
  overflow-x: auto; /*横向可滑动 // 一定要加上overflow-y：hidden，不然还可以上下滑动
                        // 重点就是white-space 和 overflow-x的设置，
                        //white-space是为了不折行
                    // overflow-x： scroll是为了出现滚动轴 */
  overflow-y: hidden;
  display: flex;
  align-items: stretch;
  padding: 0 5px;
  box-sizing: border-box;
  color: #fff;
  list-style: none;
}
/*
ul li {
  display: inline;
  list-style-type: none;
  padding: 5px 5px;
}*/

.header-menu li {
  flex: 1;
  text-align: center;
  margin-right: 25px;
  z-index: 99;
}
.hover {
  color: rgb(0, 255, 0);
}
/*消除横向滚动轴*/
ul::-webkit-scrollbar {
  display: none;
}
.li-item {
  height: 100%;
  display: flex;
  flex-flow: column; /*方向设置为垂直方向*/
  align-items: stretch;
}
.li-item:hover {
  color: rgb(62, 9, 207);
}
.li-item .li-item-icon {
  font-size: 25px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.li-item .li-item-name {
  font-size: 12px;
  padding-top: 0px;
  margin-top: 0px;
}
.active {
  color: rgb(62, 9, 207);
}
</style>